/**
 * Created by FreezeSoul on 2017/7/24.
 */
'use strict';
define([
    "app/core/base",
    "app/core/util",
    "../commonMeta",
    "jquery",
    "underscore",
    'JSONParse',
    'loglevel',
    'adConfig',
    'cloud9carousel'
], function (Chart, Util, Meta, $, _, JSON, log, adConfig) {

    var property = {
        config: "property",
        option: [
            {
                group: '基础',
                id: 'IMAGE_RESOURCE_I',
                name: '图片资源I',
                enable: false,
                type: 'resource',
                value: '',
                default: '',
                link: 'imageUrl_I',
                tooltip: '设置图片的资源路径'
            },
            {
                group: '基础',
                id: 'IMAGE_RESOURCE_II',
                name: '图片资源II',
                enable: false,
                type: 'resource',
                value: '',
                default: '',
                link: 'imageUrl_II',
                tooltip: '设置图片的资源路径'
            },
            {
                group: '基础',
                id: 'IMAGE_RESOURCE_III',
                name: '图片资源III',
                enable: false,
                type: 'resource',
                value: '',
                default: '',
                link: 'imageUrl_III',
                tooltip: '设置图片的资源路径'
            },
            {
                group: '基础',
                id: 'IMAGE_RESOURCE_IV',
                name: '图片资源IV',
                enable: false,
                type: 'resource',
                value: '',
                default: '',
                link: 'imageUrl_IV',
                tooltip: '设置图片的资源路径'
            },
            {
                group: '基础',
                id: 'IMAGE_RESOURCE_V',
                name: '图片资源V',
                enable: false,
                type: 'resource',
                value: '',
                default: '',
                link: 'imageUrl_V',
                tooltip: '设置图片的资源路径'
            },
            {
                group: '基础',
                id: 'IMAGE_RESOURCE_VI',
                name: '图片资源VI',
                enable: false,
                type: 'resource',
                value: '',
                default: '',
                link: 'imageUrl_VI',
                tooltip: '设置图片的资源路径'
            },
            {
                group: '基础',
                id: 'IMAGE_RESOURCE_VII',
                name: '图片资源VII',
                enable: false,
                type: 'resource',
                value: '',
                default: '',
                link: 'imageUrl_VII',
                tooltip: '设置图片的资源路径'
            },
            {
                group: '基础',
                id: 'IMAGE_RESOURCE_VIII',
                name: '图片资源VIII',
                enable: false,
                type: 'resource',
                value: '',
                default: '',
                link: 'imageUrl_VIII',
                tooltip: '设置图片的资源路径'
            },
            {
                group: '基础',
                id: 'IMAGE_RESOURCE_IX',
                name: '图片资源IX',
                enable: false,
                type: 'resource',
                value: '',
                default: '',
                link: 'imageUrl_IX',
                tooltip: '设置图片的资源路径'
            },
            {
                group: '基础',
                id: 'IMAGE_RESOURCE_X',
                name: '图片资源X',
                enable: false,
                type: 'resource',
                value: '',
                default: '',
                link: 'imageUrl_X',
                tooltip: '设置图片的资源路径'
            },
            {
                group: '基础',
                id: 'J_IMAGE_WIDTH',
                name: '图片宽度',
                enable: false,
                type: 'number',
                value: 400,
                default: 400,
                link: 'width',
                tooltip: '图片宽度'
            },
            {
                group: '基础',
                id: 'J_IMAGE_HEIGHT',
                name: '图片高度',
                enable: false,
                type: 'number',
                value: 200,
                default: 200,
                link: 'height',
                tooltip: '图片高度'
            },
            {
                group: '基础',
                id: 'IMAGE_xOrigin',
                name: 'xOrigin',
                enable: false,
                type: 'number',
                value: 2,
                default: 2,
                link: 'xOrigin',
                tooltip: 'Center of the carousel (x coordinate)'
            },
            {
                group: '基础',
                id: 'IMAGE_yOrigin',
                name: 'yOrigin',
                enable: false,
                type: 'number',
                value: 10,
                default: 10,
                link: 'yOrigin',
                tooltip: 'Center of the carousel (y coordinate)'
            },
            {
                group: '基础',
                id: 'IMAGE_xRadius',
                name: 'xRadius',
                enable: false,
                type: 'number',
                value: 2.3,
                default: 2.3,
                link: 'xRadius',
                tooltip: 'Half the width of the carousel'
            },
            {
                group: '基础',
                id: 'IMAGE_yRadius',
                name: 'yRadius',
                enable: false,
                type: 'number',
                value: 6,
                default: 6,
                link: 'yRadius',
                tooltip: 'Half the height of the carousel'
            },
            {
                group: '基础',
                id: 'IMAGE_MIRROR_ENABLE',
                name: '图片镜像',
                enable: false,
                type: 'checked',
                value: false,
                default: false,
                link: 'enableMirror',
                tooltip: '是否显示图片镜像'
            }, {
                group: '基础',
                id: 'IMAGE_AUTO_START',
                name: '是否自动播放',
                enable: false,
                type: 'checked',
                value: true,
                default: true,
                link: 'autostart',
                tooltip: '是否自动播放幻灯'
            },
            {
                group: '事件',
                id: 'ImageClickJsEval',
                name: '点击执行脚本',
                enable: false,
                type: 'script',
                value: '',
                default: '',
                link: 'clickScript',
                tooltip: '点击执行脚本，可定制复杂的JS操作'
            }
        ].concat($.extend(true, [], Meta.commonProperties)),
        MapOption: function (option) {
            Util.linkOption(this.option, option);
        }
    };

    var carousel3d = Chart.extend({
        constructor: function (layout) {
            this._layout = layout;
            this._element = null;
            this._container = null;
            this._carousel3d = null;
            this._currentIndex = null;
            this._option = {
                Binding: [],
                Events: [],
                Extend: $.extend(true, {}, property),
                Option: {
                    uuid: '',
                    class: '',
                    display: true,
                    imageUrl_I: "",
                    imageUrl_II: "",
                    imageUrl_III: "",
                    imageUrl_IV: "",
                    imageUrl_V: "",
                    imageUrl_VI: "",
                    imageUrl_VII: "",
                    imageUrl_VIII: "",
                    imageUrl_IX: "",
                    imageUrl_X: "",
                    width: 400,
                    height: 300,
                    xOrigin: 2,
                    yOrigin: 10,
                    xRadius: 2.3,
                    yRadius: 6,
                    enableMirror: false,
                    autostart: true,
                    clickScript: '',
                    initScript: '',
                    disposeScript: ''
                }
            };
        },
        init: function (element) {
            try {
                this._container = element;
            } catch (e) {
                log.error(e);
            }
        },
        _render: function () {
            if (this._carousel3d) {
                this._carousel3d.deactivate();
            }
            $(this._container).empty();
            var _this = this;
            var htmlStr = '<div style="width: 100%;height: 100%;">';
            var rootPath = "static/resource/";
            var imagePathArry = [
                this._option.Option.imageUrl_I,
                this._option.Option.imageUrl_II,
                this._option.Option.imageUrl_III,
                this._option.Option.imageUrl_IV,
                this._option.Option.imageUrl_V,
                this._option.Option.imageUrl_VI,
                this._option.Option.imageUrl_VII,
                this._option.Option.imageUrl_VIII,
                this._option.Option.imageUrl_IX,
                this._option.Option.imageUrl_X
            ];
            var widthStr = this._option.Option.width ? (' width="' + this._option.Option.width + 'px" ') : " ";
            var heightStr = this._option.Option.height ? (' height="' + this._option.Option.height + 'px" ') : " ";
            $.each(imagePathArry, function (i, path) {
                if (path) {
                    var imageUrl = adConfig.baseServiceUrl + rootPath + path;
                    htmlStr += '<img class="cloud9-item" ' + widthStr + heightStr + ' src="' + imageUrl + '"/>';
                }
            });
            htmlStr += '</div>';
            var $element = $(htmlStr);
            $element.css('visibility', 'visible');
            $element.css('display', 'none');
            $element.appendTo($(this._container));
            var autostart = this._option.Option.autostart === undefined ? true : this._option.Option.autostart;
            var option = {
                xOrigin: $element.width() / this._option.Option.xOrigin,//2,
                yOrigin: $element.height() / this._option.Option.yOrigin,//10,
                xRadius: $element.width() / this._option.Option.xRadius,//2.3,
                yRadius: $element.height() / this._option.Option.yRadius,//15,
                autoPlay: autostart ? 1 : 0,
                bringToFront: true,
                onLoaded: function () {
                    $element.fadeIn(1500)
                }
            };
            if (this._option.Option.enableMirror) {
                option.mirror = {
                    gap: 12,
                    height: 0.2
                };
            }
            $element.Cloud9Carousel(option);

            this._carousel3d = $element.data("carousel");
            $element.find("img.cloud9-item").on("click", function (e) {
                if ($element.data("carousel").nearestItem().element !== this &&
                    $(this).parent()[0] !== $element.data("carousel").nearestItem().element)
                    return;
                _this._currentIndex = $element.data("carousel").nearestIndex();
                log.info(this._currentIndex);
                if (_this._option.Option
                    && _this._option.Option.clickScript) {
                    Util.evalJavaScript(_this, _this._option.Option.clickScript);
                }
            });
            //Util.setCommonMeta(this, this._container, this._option.Option);
            //Util.initChartLifeTime(this, this._container, this._option.Option);
            return $element;
        },
        example: function () {
            try {
                this._element = this._render();
            } catch (e) {
                log.error(e);
            }
        },
        _readProperty: function () {
            try {
                if (!this._option.Extend) return;
                Util.deepMapOption(property, this._option.Extend, this._option.Option);
            } catch (e) {
                log.error(e);
            }
        },
        setData: function (data) {
            try {
                this._readProperty();
                this._element = this._render();
            } catch (e) {
                log.error(e);
            }
        },
        setOption: function (option) {
            try {
                return this._option = $.extend(true, {}, option);
            } catch (e) {
                log.error(e);
            }
        },
        getOption: function () {
            return this._option;
        },
        setTheme: function (theme) {
            try {
            } catch (e) {
                log.error(e);
            }
        },
        resize: function () {
            try {
            } catch (e) {
                log.error(e);
            }
        },
        showLoading: function () {
            try {
                if (this._layout && this._layout.showLoading) {
                    this._layout.showLoading(this);
                }
            } catch (e) {
                log.error(e);
            }
        },
        hideLoading: function () {
            try {
                if (this._layout && this._layout.hideLoading) {
                    this._layout.hideLoading(this);
                }
            } catch (e) {
                log.error(e);
            }
        },
        dispose: function () {
            try {
                this._carousel3d.deactivate();
                $(this._element).remove();
                //Util.disposeChartLifeTime(this, this._container, this._option.Option);
            } catch (e) {
                log.error(e);
            }
        },
        getElement: function () {
            return this._element;
        },
        getChart: function () {
            return this._element;
        }
    });

    return {
        Chart: carousel3d,
        Property: property
    };
});